<template>
	<div 
		class='one-order-btn' 
		@click='orderOperation'
    >
		{{operationInfo.font}} &nbsp;{{showTime}}
	</div>
</template>

<script>
	export default {
		props:['operationInfo','orderInfo'],
		data(){
			return ({
				animationTime:this.operationInfo.time
			});
		},
		created(){
			this.changeTime();
		},
		computed:{
			showTime(){
				return Math.floor(this.animationTime/1000/60)+':'+this.animationTime/1000%60;
			}
		},
		methods:{
			orderOperation(){
				//传出去 是什么操作  是哪一个订单
				this.$emit('orderOperation',this.operationInfo,this.orderInfo);
			},
			changeTime(){
				let This=this;
				let time=setInterval(function(){
					let nowTime=This.animationTime;
					if(nowTime){
						This.animationTime=nowTime-1000;
					}else{
						This.$emit('orderOver',This.orderInfo);
						clearInterval(time);
					}
				},1000);
			}
		}
	}
</script>

<style scoped>
	.one-order-btn{
		display: inline-block;
		float:right;
		width:90px;
		height: 18px;
		padding: 8px 8px;
		margin-left:15px;
		text-align: center;
		line-height: 18px;
		border:1px solid #eee;
		background: -o-linear-gradient(left,#fa6913,#fa281d); 
        background: -moz-linear-gradient(left,#fa6913,#fa281d); 
        background: linear-gradient(left,#fa6913,#fa281d); 
		background: -webkit-linear-gradient(left,#fa6913,#fa281d);
		color: white;
		font-weight: 100;
	}
</style>

